import React, { Component } from "react";
import { PureComponent } from "react";
import "./index.css";

export default class Parent extends PureComponent {
    state = { carName: "奔驰c36", stus: ["小张", "小李", "小王"] };

    changeCar = () => {
        this.setState({ carName: "迈巴赫" });
    };

    addStu = () => {
        // const { stus } = this.state;
        // stus.unshift("小刘");
        // this.setState({ stus });

        const { stus } = this.state;
        this.setState({ stus: ["小刘", ...stus] });
    };

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(this.props, this.state); // 目前的 props 和 state
    //     console.log(nextProps, nextState); // 接下来要变化的目标 props, 目标 state
    //     return !this.state.carName === nextState.carName;
    // }

    render() {
        console.log("Parent---render");
        const { carName } = this.state;
        return (
            <div className="parent">
                <h3>我是 Parent 组件</h3>
                {this.state.stus}&nbsp;
                <span>我的车名字是：{carName}</span>
                <br />
                <button onClick={this.changeCar}>点我换车</button>
                <button onClick={this.addStu}>添加一个小刘</button>
                <Child carName="奥拓" />
            </div>
        );
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(this.props, this.state); // 目前的 props 和 state
    //     console.log(nextProps, nextState); // 接下来要变化的目标 props, 目标 state
    //     return !this.props.carName === nextProps.carName;
    // }

    render() {
        console.log("Child---render");
        return (
            <div className="child">
                <h3>我是 Child 组件</h3>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        );
    }
}
